import { memo, useEffect, useMemo, useState } from 'react';
import type { ReactNode, FC } from 'react';
import { DetailLeftWrapper, DetailRightWrapper, DetailWrapper } from './style';
import DetailMeta from '@/components/detailMeta';
import { shallowEqualApp, useAppDispatch, useAppSelector } from '@/store/hooks';
import NavBar from '../discover/c-views/navBar';
import SongListcV1 from '@/components/songListc-v1';
import RankCommend from '../../components/rankCommend';
interface IProps {
  children?: ReactNode;
}

const Detail: FC<IProps> = (props) => {
  const { currentDetail, kind } = useAppSelector(
    (state) => ({
      currentDetail: state.detail.currentSongs,
      kind: state.detail.kind,
    }),
    shallowEqualApp
  );
  let detail = null;
  if (currentDetail?.album) {
    detail = currentDetail.album;
  } else if (currentDetail?.playlist) {
    detail = currentDetail.playlist;
  } else {
    detail = currentDetail;
  }
  return (
    <>
      <NavBar />
      <DetailWrapper className="w980 wrap-bg1">
        <DetailLeftWrapper>
          {currentDetail && (
            <>
              <DetailMeta currentDetail={detail} kind={kind}></DetailMeta>
              {(kind === 'album' || kind === 'playlist') && (
                <SongListcV1
                  currentSong={{
                    allCount: currentDetail.size || 0,
                    playCount: currentDetail.playCount || 3366,
                    songs: currentDetail.songs || [],
                  }}
                  rank={false}
                ></SongListcV1>
              )}
              <RankCommend id={currentDetail.id!} category={kind}></RankCommend>
            </>
          )}
        </DetailLeftWrapper>
        <DetailRightWrapper className="album-bg"></DetailRightWrapper>
      </DetailWrapper>
    </>
  );
};

export default memo(Detail);
